<script setup>
defineOptions({ name: 'ConfirmModal' });
const emit = defineEmits(['leftClick', 'rightClick']);
const visible = defineModel('visible', { default: false });
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  message: {
    type: String,
    default: ''
  },
  leftText: {
    type: String,
    default: '取消'
  },
  rightText: {
    type: String,
    default: '确定'
  }
});
function onLeft() {
  emit('leftClick');
}

function onRight() {
  emit('rightClick');
}
</script>

<template>
  <ElDialog v-model="visible" :show-close="false" class="w-500px">
    <div class="flex-col items-center justify-center">
      <ElIcon :size="48" color="#67c23a">
        <SvgIcon icon="ooui:success" />
      </ElIcon>
      <div class="mt-16px text-black">{{ props.title }}</div>
      <div class="mb-20px text-gray">{{ props.message }}</div>
      <ElSpace :size="10">
        <ElButton @click="onLeft">{{ props.leftText }}</ElButton>
        <ElButton type="primary" @click="onRight">{{ props.rightText }}</ElButton>
      </ElSpace>
    </div>
  </ElDialog>
</template>
